<template>
  <div class="system-info">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>控制中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-card class="never-card margin-b15" shadow="never">
            <div class="card-header">新闻动态</div>
            <div class="card-body">
              <ul class="news-list">
                <li v-for="(item,index) in newsList" :key="index">
                  <a :href="item._id" target="view_window"><span>{{item.title}}</span><label>{{item.time | filterTime}}</label></a>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="never-card margin-b15" shadow="never">
            <div class="card-header">工作审核</div>
            <div class="card-body">
              <ul class="card-do">
                <li>
                  <router-link :to="{path: '/home/'}">
                    <p>我的申请</p>
                    <span>66</span>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{path: '/home/'}">
                    <p>我的待办</p>
                    <span>12</span>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{path: '/home/'}">
                    <p>我的已办</p>
                    <span>99</span>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{path: '/home/'}">
                    <p>已完结</p>
                    <span>20</span>
                  </router-link>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="never-card margin-b15" shadow="never">
            <div class="card-header">
              定位信息
              <i>IP：{{returnCitySN.cip}}</i>
            </div>
            <div class="card-body weather-box">
              <ul>
                <li>{{hours}}好！今天是  {{day}}  {{week}}</li>
                <li>
                  <div class="tiem">
                     {{time}}
                  </div>
                  <div class="weather">
                    <div class="weather-img">
                      <img :src="weatherImg"/>
                    </div>
                    <dl>
                      <dd>{{weather.wea}}</dd>
                      <dd>{{weather.tem1}}℃ ~  {{weather.tem2}}℃</dd>
                      <dd>{{weather.win}}{{weather.win_speed}}</dd>
                    </dl>
                     <div class="tem">
                     {{weather.tem}}℃
                    </div>
                  </div>
                  <div class="clean-both"></div>
                </li>
                <li><i class="fa fa-location-arrow" aria-hidden="true"></i> 位置： {{returnCitySN.cname}}</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16">
          <el-card class="never-card chart margin-b15" shadow="never">
            <div class="card-header">国内疫情 <label class="disease-desc"><i class="fa fa-question-circle-o" aria-hidden="true" @click="open(3)"></i> 数据说明</label></div>
            <div class="card-body">
              <ul class="disease-list">
                <li>
                  <label>现存确诊 <i class="fa fa-question-circle-o" aria-hidden="true" @click="open(1)"></i></label>
                  <span>{{ disease.currentConfirmedCount }}</span>
                </li>
                <li>
                  <label>累计确诊</label>
                  <span>{{ disease.confirmedCount }}</span>
                </li>
                <li>
                  <label>境外输入</label>
                  <span>{{ disease.suspectedCount }}</span>
                </li>
                <li>
                  <label>累计治愈</label>
                  <span>{{ disease.curedCount }}</span>
                </li>
                <li>
                  <label>累计死亡</label>
                  <span>{{ disease.deadCount }}</span>
                </li>
                <li>
                  <label>无症状 <i class="fa fa-question-circle-o" aria-hidden="true" @click="open(2)"></i></label>
                  <span>{{ disease.seriousCount }}</span>
                </li>
                <div class="clean-both"></div>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="never-card chart margin-b15" shadow="never">
            <div class="card-header">版本信息</div>
            <div class="card-body">
              <table>
                <tbody>
                   <tr>
                     <td>发布时间</td><td>{{dev.releaseTime | dayTime }}</td>
                  </tr>
                  <tr>
                    <td>当前版本</td><td>{{dev.editionNo}} <router-link to="/home/syslog">日志</router-link></td>
                  </tr>
                  <tr>
                    <td>前端环境</td><td>vue 2.5</td>
                  </tr>
                   <tr>
                    <td>服务端环境</td><td>Java 1.8</td>
                  </tr>
                  <tr>
                    <td>数据库</td><td>MySQL 5.6/5.7</td>
                  </tr>
                  <tr>
                    <td>系统环境</td><td>CentOS 7.5</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 日期格式化
import moment from 'moment';

export default {
  name: 'system',
  data () {
    return {
      // IP地址
      returnCitySN: JSON.parse(localStorage.getItem('local')) === null || undefined || '' ? '' : JSON.parse(localStorage.getItem('local')),
      // 天气数据
      weather: {
        cityid: '', // 城市ID
        date: '', // 当前日期
        week: '', // 当前星期
        update_time: '', // 气象台更新时间
        city: '', // 城市名称
        cityEn: '', // 城市英文名称
        country: '', // 国家名称
        countryEn: '', // 国家英文名称
        wea: '', // 天气情况
        wea_img: '', // 天气对应图标 固定9种类型(您也可以根据wea字段自己处理): xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
        tem: '', // 实时温度
        tem1: '', // 高温
        tem2: '', // 低温
        win: '', // 风向
        win_speed: '', // 风力等级
        win_meter: '', // 风速
        humidity: '', // 湿度
        visibility: '', // 能见度
        pressure: '', // 气压hPa
        air: '', // 空气质量
        air_level: '', // 空气质量等级
        air_tips: '' // 空气质量描述
      },
      // 时间段
      hours: '',
      // 天气图片
      weatherImg: '',
      // 日期
      day: moment(new Date()).format('YYYY年MM月DD日'),
      // 时间
      time: moment(new Date()).format('HH:mm:ss'),
      // 星期
      week: '',
      // 版本信息
      version: [],
      // 疫情数据
      disease: {},
      // 新闻资讯
      newsList: [],
      // 系统版本
      dev: []
    };
  },
  created () {
    // 获取天气
    this.getWeather();
    // 获取星期
    this.getWeek();
    // 获取疫情
    this.getDisease();
    // 公司新闻
    this.getNews();
    // 获取版本
    this.getDev();
  },
  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('MM-DD');
    },

    dayTime (value) {
      return moment(value).format('YYYY年MM月DD日');
    }
  },
  mounted () {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.time = moment(new Date()).format('HH:mm:ss'); // 修改数据date
      let hour = moment(new Date()).format('HH');
      switch (hour !== '') {
        case hour >= 0 && hour <= 6:
          _this.hours = '凌晨';
          break;
        case hour > 6 && hour < 11:
          _this.hours = '上午';
          break;
        case hour >= 11 && hour < 13:
          _this.hours = '中午';
          break;
        case hour >= 13 && hour <= 16:
          _this.hours = '下午';
          break;
        case hour > 16 && hour <= 18:
          _this.hours = '傍晚';
          break;
        default:
          _this.hours = '晚上';
          break;
      };
    }, 1000);
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 获取版本
    getDev () {
      let _this = this;
      // 获取当前版本
      _this.$http.get('api/findLastEdition').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.dev = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取星期
    getWeek () {
      let _this = this;
      let weeks = moment().format('dddd');
      switch (weeks.length > 0) {
        case weeks === 'Monday':
          _this.week = '星期一';
          break;
        case weeks === 'Tuesday':
          _this.week = '星期二';
          break;
        case weeks === 'Wednesday':
          _this.week = '星期三';
          break;
        case weeks === 'Thursday':
          _this.week = '星期四';
          break;
        case weeks === 'Friday':
          _this.week = '星期五';
          break;
        case weeks === 'Saturday':
          _this.week = '星期六';
          break;
        default:
          _this.week = '星期日';
          break;
      }
    },
    // 获取当前天气
    getWeather () {
      let _this = this;
      //  创建一个xhr对象
      let xhr = new XMLHttpRequest();
      // 监听状态的改变
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          // 请求成功
          if (xhr.status === 200) {
            // 响应成功
            let datas = JSON.parse(xhr.responseText);
            _this.weather = datas;
            switch (datas.wea !== '') {
              case datas.wea.length > 0:
                _this.weatherImg = '/static/images/weather/' + datas.wea + '.png';
                break;
              default:
                _this.weatherImg = '/static/images/weather/无.png';
                break;
            }
          } else {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        }
      };
      // 当前登录IP
      let ip = _this.returnCitySN['cip'];
      // 打开一个链接 1.请求方式  2.发送到哪去  3.是否为异步请求 是true 否 flase
      xhr.open('get', 'https://tianqiapi.com/api?version=v6&appid=68723719&appsecret=SoaJ5KPf&vue=1&ip=' + ip, true);
      // 发送数据
      xhr.send();
    },

    // 获取当前疫情
    getDisease () {
      let _this = this;
      let request = require('request');
      request.get('http://api.tianapi.com/txapi/ncov/index?key=445c126abf51e912985ac77bf9ec2fae', (err, response, body) => {
        let res = JSON.parse(body);
        if (res.code === 200) {
          _this.disease = res.newslist[0].desc;
        } else {
          _this.$message({
            message: err,
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取公司新闻
    getNews () {
      let _this = this;
      let request = require('request');
      request.get('http://39.98.244.224:83/api/article/getFrontArticle?page=1&pagesize=5', (err, response, body) => {
        let res = JSON.parse(body);
        if (res.error === 0) {
          res.list.forEach(item => {
            item._id = `http://www.certusnet.com.cn/Front/` + item._id;
          });
          _this.newsList = res.list;
        } else {
          _this.$message({
            message: err,
            type: 'error'
          });
          return false;
        }
      });
    },

    // 详细说明
    open (type) {
      let _this = this;
      const h = _this.$createElement;
      if (type === 1) {
        _this.$msgbox({
          title: '数据说明',
          message: h('p', null, [
            h('p', null, '什么是“现有确诊数”? '),
            h('p', null, '1、“现有确诊数”口径取自国家卫健委每日公布的“现有确诊病例数”,该数值反映了当前正在治疗中的确诊人数。 '),
            h('p', null, '2、实时更新时,我们会用“现有确诊人数=累计确诊人数-累计治愈人数-累计死亡人数”计算得到。 ')]),
          showCancelButton: false
        });
      }
      if (type === 2) {
        _this.$msgbox({
          title: '数据说明',
          message: h('p', null, [
            h('p', null, '新冠病毒无症状感染者（以下简称无症状）是指无相关临床症状，如发热、咳嗽、咽痛等可自我感知或可临床识别的症状与体征，但呼吸道等标本新冠病毒病原学检测阳性者。'),
            h('p', null, '“无症状”数据取自国家卫健委每日最新公布的“无症状感染者”数据。')
          ]),
          showCancelButton: false
        });
      }
      if (type === 3) {
        _this.$msgbox({
          title: '数据说明',
          message: h('p', { style: 'height: 250px; overflow:auto;' }, [
            h('p', null, '1、数据来源：'),
            h('p', null, '来自国家卫健委、各省市区卫健委、各省市区政府、港澳台官方渠道公开数据； '),
            h('p', null, '2、数据统计原则：'),
            h('p', null, 'a) 每日上午全国数据会优先使用国家卫健委公布的数据（此时各省市数据尚未及时更新，会出现全国数据大于各省份合计数的情况）； '),
            h('p', null, 'b) 当各省公布数据总和大于国家卫健委公布的数据时，则全国数据切换为各省合计数； '),
            h('p', null, 'c) 全国数据含港澳台地区数据；'),
            h('p', null, '3、数据更新时间：'),
            h('p', null, '实时更新全国、各省市区数据，因需要核实计算，与官方发布的时间相比，将有一定的时间延迟； '),
            h('p', null, '4、全国疫情总数中「昨日+」的数据来源于每天上午卫建委发布的上一日的新增病例数，其含义是上一天24小时内新增的病例数：'),
            h('p', null, 'a) 「昨日+」新增疑似病例数据，代表当日新被诊断为疑似病例的人数。而累计疑似病例数除了当日新增之外，还会随着历史疑似病例的确诊和解除疑似而减少，所以累计增加的疑似病例数一般会比「昨日+」疑似病例数小。疑似数据按日更新，仅同步全国总数；'),
            h('p', null, 'b) 「昨日+」新增确诊人数在经过核查后，可能会有少量排除确诊而减少； '),
            h('p', null, '5、国外数据说明：'),
            h('p', null, 'a) 数据来源：国外疫情数据均来自各国官方通报和国内权威媒体（如央视新闻、人民日报等）。疫情数据日期采用北京时区，非各国当地日期；'),
            h('p', null, 'b) 更新时间：国外疫情数据因追踪、核实需要，与各国官方的发布时间相比较有一定的延迟；')
          ]),
          showCancelButton: false
        });
      }
    }

  }

};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
